﻿<template>
  <l-panel v-if="!lr_loadPage" style="padding: 0">
    <template #toolLeft>
      <l-query2
        :items="queryItems"
        :formData="queryData"
        :loading="tableLoading"
        @search="handleSearch"
      >
        <template #f_Type>
          <el-input v-model="queryData.f_Type" :placeholder="$t('please enter')" />
        </template>
        <template #f_CreateDateQRange>
          <l-date
            dateType="datetimerange"
            v-model="queryData.f_CreateDateQRange"
            :placeholder="$t('please select')"
          />
        </template>
      </l-query2>
    </template>
    <template #toolRight>
      <l-tool-btns
        :hasTableSetting="true"
        @setting="lr_handleSettingTable"
        @click="handleAdd()"
      >
        <l-excel-btns :moduleCode="moduleCode" ></l-excel-btns>
      </l-tool-btns>
    </template>
    <l-table
      ref="mainTable"
      :loading="tableLoading"
      :columns="lr_getPageColumns(columns)"
      :dataSource="tableData"
      :isPage="true"
      :pageTotal="tableTotal"
      :tablePage.sync="tableCurrentPage"
      @loadPageData="turnTablePage"
      rowKey="f_Id"
      isMultiSelect
    >
      <template v-slot:f_State="scope">
        <el-switch
          active-value="0"
          inactive-value="1"
          v-model="scope.row.f_State"
          @change="changeState(scope.row)"
        >
        </el-switch>
      </template>

      <l-table-btns
        :btns="tableBtns"
        @click="lr_handleTableBtnClick"
      ></l-table-btns>
    </l-table>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="379"
      :width="487"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form"></my-form>
    </l-dialog>
  </l-panel>
</template>

<script>
import MyForm from "./form";
const api = window.$api.erpcase.materialclasses;
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      moduleCode: "ERP_MaterialClasses",

      // query参数
      queryData: {
        f_Type: "",
        f_CreateDateQRange: "",
      },

      queryItems: [
        { label: "物料类别", prop: "f_Type" },
        { label: "创建日期", prop: "f_CreateDateQRange" },
      ],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "物料类别",
          prop: "f_Type",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "创建人",
          prop: "f_CreateUserId",
          minWidth: 120,
          align: "left",
          dataType: "user",
        },
        {
          label: "创建日期",
          prop: "f_CreateDate",
          minWidth: 120,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd HH:mm:ss",
        },
        {
          label: "备注",
          prop: "f_Description",
          minWidth: 120,
          align: "left",
        },
        { label: "状态", prop: "f_State", minWidth: 120, align: "left" },
      ],
      tableBtns: [
        { prop: "Edit", label: "Edit",width:40 },
        { prop: "Delete", label: "Delete",width:40 },
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    async init() {
      await this.loadTableData();
    },

    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_Id";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleAdd() {
      this.formEdit = false;
      this.handleShowForm("Add物料类别");
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.handleShowForm("Edit物料类别");
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("This operation will permanently delete the data. Do you want to continue?"),
        this.$t("Tips"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("Delete  success"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("Delete has been canceled!"),
          });
        });
    },

    async handleSave(showLoading, hideLoading) {
      showLoading("saving data...");
      if (await this.$refs.form.validateForm()) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit ? "更新成功!" : "Add成功!";
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("Loading data...");
        await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id });
        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    // 修改列表页的状态
    async changeState({ f_State, f_Id }) {
      const postData = {
        f_State,
        f_Id,
      };
      const res = await this.$awaitWraper(api.changeState(f_Id, postData));
      if (res) {
        this.$message({
          type: "success",
          message: res,
        });
      }
    },
  },
};
</script>
